<template>
<!-- 登录/注册 -->
<div id="message" >
    <div class="messagehead">信息审核</div>
  <div class="text-earpper">
    <p ><span>项目名称:</span><span>{{DataGood.projectname}}</span> </p>
    <p ><span>地址选择:</span><span>{{DataGood.address}}</span></p>
    <p ><span>项目详细地址:</span><span>{{DataGood.addressdetail}}</span></p>
    <p ><span>项目联系电话:</span><span>{{DataGood.phone}}</span></p>
    <p ><span>项目联系人:</span><span>{{DataGood.contacter}}</span></p>
    <div class="message"> <span style="display: inline-block; width: 15px;text-align: center;color: #fff; line-height: 35px;">*</span>项目概况：
      <yd-checkbox-group v-model="viewmark" style="padding: 0px 10px;">
        <yd-checkbox disabled val=1>是否打桩</yd-checkbox><br/>
        <yd-checkbox disabled val=2>是否基地开挖</yd-checkbox><br/>
        <yd-checkbox disabled val=3>是否已做防水层</yd-checkbox><br/>
      <div class="textareabox">
        <textarea  readonly v-model="DataGood.overview"  name="" id="" cols="30" rows="10"></textarea>
      </div>
      </yd-checkbox-group><br/>
    </div>
    <p ><span>项目建设单位:</span><span>{{DataGood.conunit}}</span></p>
    <p ><span>项目总包单位:</span> <span>{{DataGood.totaluinit}}</span></p>
    <p ><span>项目工程量:</span> <span>{{DataGood.quantity}}</span></p>
    <p class="text"> <span style="width: 38%;">是否已发送附件至邮箱:</span><input class="blockipt" disabled v-model="istrue"   type="checkbox"/></p>
    <p ><span>项目附件备注:</span> <span>{{DataGood.projectremark}}</span></p>
    <p ><span>提交者联系方式:</span> <span>{{DataGood.submitterphone}}</span></p>
    <p ><span>银行账号:</span> <span>{{DataGood.bankcode}}</span></p>
    <p ><span>持卡人姓名:</span> <span>{{DataGood.cardholder}}</span></p>
    <p ><span>开户行:</span> <span>{{DataGood.bankname}}</span></p>
    <p ><span>支付宝姓名:</span> <span>{{DataGood.alipayname}}</span></p>
    <p ><span>支付宝账号:</span> <span>{{DataGood.alipay}}</span></p>
    <p ><span>微信账号:</span> <span>{{DataGood.wechat}}</span></p>
    <div>
    <div class="beizhu" v-if="DataGood.status===1||DataGood.status===2" >备注：
      <yd-checkbox-group v-model="topremark">
        <yd-checkbox  disabled val=1>项目不存在</yd-checkbox><br/>
        <yd-checkbox  disabled val=2>项目地址不对</yd-checkbox><br/>
        <yd-checkbox  disabled val=3>项目负责人不对</yd-checkbox><br/>
        <yd-checkbox  disabled val=4>项目负责人联系方式不对</yd-checkbox>
        <div class="textareabox" style='margin-top:15px;'>
          <textarea v-model="DataGood.auditremark" readonly name="" id="" cols="30" rows="10"></textarea>
        </div>
      </yd-checkbox-group>
    </div>
    <div class="beizhu" v-else>备注：
      <yd-checkbox-group v-model="remark">
        <yd-checkbox  val=1>项目不存在</yd-checkbox><br/>
        <yd-checkbox  val=2>项目地址不对</yd-checkbox><br/>
        <yd-checkbox  val=3>项目负责人不对</yd-checkbox><br/>
        <yd-checkbox  val=4>项目负责人联系方式不对</yd-checkbox>
        <div class="textareabox" style='margin-top:15px;'>
          <textarea v-model="auditremark" placeholder="其他备注" name="" id="" cols="30" rows="10"></textarea>
        </div>
      </yd-checkbox-group>
    </div>
    </div>
    <p v-if="off" class="money" >金额:<input onkeyup="value=value.replace(/[^\d]/g,'')" type="text" v-model.number='money'></p>
    <p  v-else class="money" > <span style="font-size:14px;width:100%;padding:0 25px;" >金额: {{DataGood.auditmoney}}</span></p>
    <div class="message-item" style="width: 100%; text-align:center; color:teal;line-height:50px;font-size:16px;">
      <span style="display:block;margin: 0 auto; width: 80%;color:teal;">
        咨询电话: 63339922
      </span>    </div>
  </div>
 <div>
    <div v-if="author.three == 1">
      <div class="status" v-show="off" style="z-index: 888;">
        <span class='statusspan' @click="todetail">通过</span>
        <span class='statusspan' @click="todetailnone">不通过</span>
      </div>
      <div class="statusa" style="z-index: 888;" v-show="completed">
        <div class='statusspantwo' @click="tolisttwo">已审核点击返回</div>
      </div>
    </div>
    <div class="statusa" style="z-index: 888;" v-else>
      <div class='statusspantwo' @click="tolisttwo">没有审核权限点击返回</div>
    </div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { XInput, Group, XButton, Cell, ChinaAddressV4Data, XAddress, Datetime, GroupTitle, Selector, PopupPicker, CheckIcon, XNumber, XTextarea, XSwitch } from 'vux'
export default {
  data () {
    return {
      overview: '',
      auditremark: '',
      remark: [],
      viewmark: [],
      topremark: [],
      author: {
        one: null, // 查看列表
        two: null, // 删除未审核
        three: null // 审核（通过/不通过）
      },
      projectname: null,
      Datalist: [],
      items: [],
      contacter: '',
      wechat: '',
      num: '',
      phone: '',
      conunit: '',
      auditmoney: '',
      getAddress: '',
      alipayname: '',
      bankname: '',
      alipay: '',
      addressdetail: '',
      totaluinit: '',
      Id: '',
      isannex: false,
      annex: '',
      money: '',
      bankcode: '',
      cardholder: '',
      quantity: '',
      DataGood: [],
      projectremark: '',
      submitterphone: '',
      addressData: ChinaAddressV4Data,
      addressInfo: [],
      addresstemp: '',
      statustemp: '',
      status: '',
      showAddress: false,
      completed: false,
      off: false,
      userId: '',
      istrue: false
    }
  },
  created () {
    this.menu()
    this.userId = this.$route.query.wxuserinfoid
    var qs = require('querystring')
    this.$axios.post('http://www.ynyxgcxx.com/projectmanage/auth/messagep',
      qs.stringify({
        vid: this.userId
      })
    ).then((response) => {
      if (response.data.wxuserinfo.id !== '') {
        window.localStorage.setItem('userInfo', JSON.stringify(response.data))
        this.Id = this.$route.query.id
        this.$axios.post('http://www.ynyxgcxx.com/projectmanage/app/projectinfo/detail',
          this.confusion(
            JSON.stringify({
              id: this.Id
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
          .then(response => {
            this.DataGood = response.data
            if (response.data.length <= 0) {
              this.$dialog.toast({
                mes: '数据不存在或已被删除'
              })
              return
            }
            // 审核勾选备注
            this.DataGood.remark = eval(this.DataGood.remark)
            console.log(this.DataGood.remark)
            if (this.DataGood.remark !== undefined) {
              this.topremark = this.DataGood.remark
            }
            // 概况勾选备注
            this.DataGood.viewmark = eval(this.DataGood.viewmark)
            console.log(this.DataGood.viewmark)
            if (this.DataGood.viewmark !== undefined && this.DataGood.viewmark.length > 0) {
              this.viewmark = this.DataGood.viewmark
            }
            if (response.data.status === 0) {
              this.off = true
              this.completed = false
            } else {
              this.off = false
              this.completed = true
            }
            if (response.data.isannex === 1) {
              this.istrue = true
            } else {
              this.istrue = false
            }
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      } else {
        console.log('跳转到微信公众号')
      }
    })
    this.author.one = JSON.parse(window.localStorage.getItem('userInfo')).wxuserinfo.isstaff
    this.author.two = JSON.parse(window.localStorage.getItem('userInfo')).wxuserinfo.isdelete
    this.author.three = JSON.parse(window.localStorage.getItem('userInfo')).wxuserinfo.isaudit
  },
  methods: {
    menu () {
      window.scrollTo(0, 0)
    },
    tolisttwo () {
      this.$router.push({
        path: '/list',
        query: {
          wxuserinfoid: this.userId
        }
      })
    },
    mounted () {
      document.title = '表单'
    },
    doShowAddress () {
      this.showAddress = true
      setTimeout(() => {
        this.showAddress = false
      }, 2000)
    },
    changeData () {
      this.value2 = ['430000', '430400', '430407']
    },
    logHide (str) {
      console.log('on-hide', str)
    },
    logShow (str) {
      console.log('on-show')
    },
    // 提交数据
    todetail () {
      this.Id = this.$route.query.id
      if (this.money === '') {
        this.$dialog.toast({
          mes: '填写金额'
        })
        return
      }
      var reg = /^[0-9]+.?[0-9]*$/
      if (!reg.test(this.money)) {
        this.$dialog.toast({
          mes: '金额格式不正确，请重新输入'
        })
        return
      }
      this.getAddress = ''
      // 地址处理
      for (var i = 0; i < ChinaAddressV4Data.length; i++) {
        for (var n = 0; n < this.addressInfo.length; n++) {
          if (this.addressInfo[n] === ChinaAddressV4Data[i].value) { this.getAddress += ChinaAddressV4Data[i].name }
        }
      }

      this.$axios.post('http://www.ynyxgcxx.com/projectmanage/app/projectinfo/audit',
        this.confusion(
          JSON.stringify({
            status: 1,
            money: this.money,
            auditremark: this.auditremark,
            id: this.Id,
            remark: this.remark
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
        .then(response => {
          this.$dialog.toast({
            mes: '提交成功'
          })

          this.off = false
          this.completed = true
          this.DataGood.auditmoney = this.money
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '提交失败，请重试'
          })
        })
    },
    todetailnone () {
      if (this.remark.length < 1 && !this.auditremark) {
        this.$dialog.toast({
          mes: '至少选择一条备注或输入备注'
        })
        return
      }
      this.Id = this.$route.query.id
      this.getAddress = ''
      // 地址处理
      for (var i = 0; i < ChinaAddressV4Data.length; i++) {
        for (var n = 0; n < this.addressInfo.length; n++) {
          if (this.addressInfo[n] === ChinaAddressV4Data[i].value) { this.getAddress += ChinaAddressV4Data[i].name }
        }
      }
      this.$axios.post('http://www.ynyxgcxx.com/projectmanage/app/projectinfo/audit',
        this.confusion(
          JSON.stringify({
            status: 2,
            money: this.money,
            id: this.Id,
            remark: this.remark,
            auditremark: this.auditremark
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
        .then(response => {
          this.$dialog.toast({
            mes: '提交成功'
          })
          this.off = false
          this.completed = true
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '提交失败，请重试'
          })
        })
    }
  },
  components: {
    XInput,
    XButton,
    Datetime,
    Group,
    Cell,
    CheckIcon,
    ChinaAddressV4Data,
    XAddress,
    GroupTitle,
    Selector,
    PopupPicker,
    XNumber,
    XTextarea,
    XSwitch
  }
}
</script>
<style scoped>
.message-wrap{
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding-bottom:50px;
}
.messagehead{
  width: calc(100% - 20px);
  height: 16px;
  line-height: 16px;
  text-indent: 5px;
  text-align: left;
  margin: 10px auto;
  border-left: 5px solid teal;
  font-size: 14px;
  font-weight: bold;
  color:teal;
}
.text-earpper{
  padding-bottom: 40px;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #fff;
}
.text-earpper p{
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  border-bottom: 1px solid #ccc;
}
.text-earpper p span{
  display: inline-block;
  text-align: left;
  display: inline-block;
  text-indent: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  width: 73%;
}
.text-earpper p span:nth-of-type(1){
  margin: 0px;
  float: left;
  width: 27%;
  font-size: 12px;

}
.text-earpper p input{
  width: 50%;
  height: 100%;
  margin: 0 auto;
}
.message-wrap{
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding-bottom:50px;
}
.text{
  padding: 15px;
}
.text input{
  width: 15px;
  height: 15px;
}
.status,.statusa{
  position: fixed;
  bottom:0;
  display: flex;
  width: 100%;
  height: 40px;
  color:#fff;
  background: #085078;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #85D8CE, #085078);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #85D8CE, #085078);
}
/* .vux-x-input .weui-cell{
  padding: 10px 20px;
  height: 100%;
} */
.status .statusspan,.statusa .statusspantwo{
  /* flex: 1; */
  display: inline-block;
  text-align: center;
  line-height: 40px;
  width: 100%!important;
  height:40px;
  font-size: 14px;
  font-weight: bold;
  border-right:1px solid #ccc;
}
.status .statusspan:last-child{
  border: none;
}
.text-earpper .money{
  font-size: 15px;
  font-weight: bold;
  width: 50%;
  height: 35px;
  line-height: 35px;
  margin: 10px auto 0px;
  text-indent: 35px;
  color: teal;
  border-bottom: none;
}
.beizhu{
  border-bottom: 1px solid #ccc;
  padding: 20px 15px;
  line-height: 20px;
}
.beizhu textarea{
  color:#777;
  border: 1px solid #eee;
  flex: 1;
  text-indent: 10px;
  padding: 5px 0px;
}
.yd-checkbox{
  margin-top:5px;
}
.message{
  border-bottom: 1px solid #ccc;
  padding: 5px 0px;
  line-height: 20px;
}
.textareabox{
  margin: 20px auto 0;
  width:  100%;
  height: 80px;
}
textarea{
  color:#777;
  width:100%;
  height: 80px;
  border: 1px solid #ccc;
}
.text .blockipt{
  width: 15px;
  height: 15px;
  margin-left: 10px;
}
</style>
